<template>
  <div class="homepage">
    <loading :loading-flag="loadingFlag"></loading>
    <div class="bg">
      <img src="../../assets/images/homepage-bg.png" />
      <div class="banner">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item
            v-for="item in info.banner"
            :key="item"
            @click="gotoDetail(item.url)"
          >
            <img :src="item.images" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="tabs">
      <img
        v-for="(item, index) in info.type"
        :key="item"
        :src="item.coverimage"
        @click="goToTab(index, item.id)"
        class="tabs-item"
      />
    </div>

    <div class="info">
      <div
        class="info-item"
        v-for="(item, index) in infos"
        :key="item"
        @click="goToDeatil(index)"
      >
        <img :src="item.src" />
        <div class="info-item-text">{{ item.name }}</div>
      </div>
    </div>

    <div v-for="item in info.trinity" :key="item">
      <div class="san-box">
        <nav class="san-box-title" :class="isScroll && 'san-box-title-special'">
          <span class="san-box-title-left">三位一体</span>
          <div
            @click="goToConnect"
            class="san-box-title-right"
            :style="{ top: isScroll ? '50%' : '' }"
          >
            <span>联系咨询</span>
            <img :src="contract_pic" />
          </div>
        </nav>
        <div class="san-box-wrap">
          <div class="san-box-wrap-left">
            <img :src="item.coverimage" />
          </div>
          <div class="san-box-wrap-right">
            <div class="san-box-wrap-right-top">
              {{ item.titile }}
            </div>
            <div class="san-box-wrap-right-bot">
              {{ item.subtitle }}
            </div>
          </div>
          <div class="san-box-wrap-top" @click="goToZX(item.id)">查看详情</div>
        </div>
      </div>
      <lazy-component>
        <div class="what-san">
          <div class="what-san-vedio">
            <video
              ref="myVedio"
              id="myVedio"
              :poster="poster"
              :src="item.video"
              controls
              class="what-san-vedio-box"
            ></video>
            <!-- <img
            :src="vedioPlay"
            alt=""
            @click="operateVideo"
            class="operate-btn"
            :class="{ 'fade-out': videoState }"
          /> -->
          </div>
          <div class="what-san-wrap">
            <div class="what-san-wrap-left">
              {{ item.video_title }}
            </div>
            <div class="what-san-wrap-right">
              <div class="right-look">
                <img src="../../assets/images/sicon-one.png" />
                <span>{{ item.video_viwe }}</span>
              </div>
              <div class="right-look">
                <img src="../../assets/images/sicon-two.png" /><span>{{
                  item.video_ask
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </lazy-component>
    </div>

    <lazy-component>
      <div class="introduce san-box">
        <nav class="san-box-title">
          <span class="san-box-title-left">课程介绍</span>

          <div class="san-box-title-right-2">
            <span @click="classMore">查看更多</span>
            <img src="../../assets/images/homepage-more.png" />
          </div>
        </nav>
        <div class="introduce-wrap">
          <div
            class="introduce-wrap-item"
            v-for="(item, index) in info.course"
            @click="gotoSchool(item.id)"
            :key="item.name"
          >
            <introduceProject
              :index="index"
              :introduce="item"
              :readMore="false"
            ></introduceProject>
          </div>
        </div>
      </div>
    </lazy-component>

    <lazy-component>
      <div class="information introduce san-box">
        <nav class="san-box-title">
          <span class="san-box-title-left">资讯列表</span>
          <div class="san-box-title-right-2">
            <span @click="goToZixunList(tabIndex,currentIndex)">查看更多</span>
            <img src="../../assets/images/homepage-more.png" />
          </div>
        </nav>
        <div class="information-list">
          <div
            v-for="(item,index) in info.type"
            :key="item"
            :class="{
              'information-list-item-bg': item.id == tabIndex,
              'information-list-item': true
            }"
          >
            <span @click="changeNav(item.id,index)">{{ item.title }}</span>
          </div>
        </div>
        <div class="introduce-wrap">
          <div class="items"></div>
          <div
            class="introduce-wrap-item"
            v-for="item in info.article"
            @click="goToZX(item.id)"
            :key="item.name"
          >
            <consultationProject
              :background="true"
              :icon="true"
              :introduce="item"
            ></consultationProject>
          </div>
        </div>
      </div>
    </lazy-component>

    <p class="link">www.gaobangbang.com</p>
    <p class="link">
      <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" class="bei"
        >浙ICP备10023285号
      </a>
    </p>
    <!-- <button @click="goTo()">我是按钮1</button> -->
    <!-- <Banner /> -->
  </div>
</template>

<script setup>
import { getHomepageList, getArticleList } from '../../api/apiList/homePage.js';
import homepageInfo1 from '../../assets/images/homepage-info1.png';
import homepageInfo2 from '../../assets/images/homepage-info2.png';
import homepageInfo3 from '../../assets/images/homepage-info3.png';
import homepageInfo4 from '../../assets/images/homepage-info4.png';
import homepageInfo5 from '../../assets/images/homepage-info5.png';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import introduceProject from './components/introduceProject.vue';
import consultationProject from './components/consultationProject.vue';
import contractOne from '../../assets/images/contract-one.jpg';
import homepageConnect from '../../assets/images/homepage-connect.png';
import loading from '../../components/loading.vue';

let contract_pic = ref(homepageConnect);
let isScroll = ref(false);
let tabIndex = ref(0);
let info = ref({});
const myVedio = ref();
let loadingFlag = ref(true);
let currentIndex = ref(0)

onMounted(async () => {
  window.addEventListener('scroll', getPic); // 监听页面滚动
  // 获取列表数据
  await getHomepageList().then((res) => {
    loadingFlag.value = false;
    const { result } = res;
    info.value = result;
    tabIndex.value = result.type[0].id;
  });
});

const router = useRouter();
const infos = [
  {
    src: homepageInfo1,
    name: '招生信息'
  },
  {
    src: homepageInfo2,
    name: '大学推荐'
  },
  {
    src: homepageInfo3,
    name: '智能报考'
  },
  {
    src: homepageInfo4,
    name: '课程介绍'
  },
  {
    src: homepageInfo5,
    name: '报名入口'
  }
];
const goToTab = (tabIndex, id) => {
  router.push({ path: '/tabDetail', query: { tabIndex, id } });
};
const gotoDetail = (url) => {
  if(url!=''){
     window.location.href=url;
  }
 
};
const goToZixunList = (id,currentIndex) => {
  router.push({ path: '/zixunList', query: { id,currentIndex } });
};
const classMore = () => {
  router.push({ path: '/courseIntroduction', query: {} });
};
const goToDeatil = (index) => {
  if (index == 2) {
    router.push({ path: '/smartRegistration', query: { tabIndex: index } });
  } else if (index == 3) {
    router.push({ path: '/courseIntroduction', query: { tabIndex: index } });
  } else if (index == 4) {
    router.push({ path: '/registrationEntrance', query: { tabIndex: index } });
  } else {
    router.push({ path: '/enrollment', query: { tabIndex: index } });
  }
};

//  const operateVideo = () => {
//   // console.log(myVedio)
//      const myVedio = document.getElementById('myVedio')
//       if (myVedio.paused) {
//         myVedio.play();
//         videoState.value = true;
//       } else {
//         myVedio.pause();
//         videoState.value = false;
//       }
//     }

const goToZX = (id) => {
  router.push({ path: '/InformationDetails', query: { id } });
};

const gotoSchool = (id) => {
  router.push({ path: '/classIntroduce', query: { id } });
};

const getPic = () => {
  if (document.documentElement.scrollTop > 0) {
    isScroll.value = true;
    contract_pic.value = contractOne;
  } else {
    isScroll.value = false;
    contract_pic.value = homepageConnect;
  }
};

const goToConnect = () => {
  router.push({ path: '/connect' });
};

const changeNav = (id,index) => {
  tabIndex.value = id;
  currentIndex.value = index;
  getArticleList({
    type: id,
    page: 1,
    limit: 3
  }).then((res) => {
    const { result } = res;
    info.value.article = result;
  });
};
</script>

<style lang="less">
.van-swipe {
  height: 100%;
}
.my-swipe111 .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.homepage {
  width: 414px;
  .bg {
    img {
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 0;
    }

    .banner {
      position: relative;
      width: 386px;
      height: 171px;
      border-radius: 30px;
      margin: 0 auto;
      margin-top: 156px;
      z-index: 1;
      overflow: hidden;
      margin-bottom: 18px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .tabs {
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    flex-wrap: wrap;

    .tabs-item {
      width: 182px;
      height: 94px;
      border-radius: 13px;
      margin-bottom: 18px;
    }
  }

  .info {
    display: flex;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 27px;
    justify-content: space-between;

    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 25px;
        height: 25px;
        margin-bottom: 5px;
      }

      .info-item-text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
      }
    }
  }

  .san-box {
    padding: 0 16px;

    .san-box-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .san-box-title-left {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 33px;
        letter-spacing: 1px;
      }

      .san-box-title-right {
        position: fixed;
        width: 121px;
        height: 32px;
        border-radius: 16px;
        right: 0;
        z-index: 999;
        // top:50%;

        img {
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }

        span {
          position: relative;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 17px;
          z-index: 1;
          left: 30px;
          top: 7px;
        }
      }
    }

    .san-box-title-special {
      .san-box-title-right {
        position: fixed;
        width: 121px;
        height: 32px;
        border-radius: 16px;
        right: 0;
        z-index: 999;

        img {
          position: absolute;
          right: 0;
          top: 0;
          width: 32px;
          height: 32px;
          z-index: 0;
        }

        span {
          display: none;
        }
      }
    }

    .san-box-wrap {
      position: relative;
      width: 386px;
      height: 99px;
      background-image: url('../../assets/images/homepage-san.png');
      background-size: 100%;
      border-radius: 20px;
      margin-top: 10px;
      display: flex;
      align-items: center;

      .san-box-wrap-left {
        flex: 0 0 77px;
        width: 77px;
        height: 77px;
        margin-right: 16px;
        margin-left: 12px;
        border-radius: 20px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 20px;
        }
      }

      .san-box-wrap-right {
        .san-box-wrap-right-top {
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 21px;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 160px;
        }

        .san-box-wrap-right-bot {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #3f3e3e;
          line-height: 18px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          padding-right: 30px;
        }
      }

      .san-box-wrap-top {
        position: absolute;
        top: 16px;
        right: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        padding: 4px 12px;
        line-height: 14px;
        border-radius: 11px;
        background: #ffffff;
      }
    }
  }

  .what-san {
    width: 365px;
    background: #e6e7ff;
    border-radius: 20px;
    backdrop-filter: blur(0px);
    padding: 10px 10px 19px 11px;
    margin: 0 auto;
    margin-top: 18px;

    .what-san-vedio {
      width: 365px;
      height: 156px;
      background: rgba(77, 77, 77, 0.55);
      box-shadow: 0px 2px 4px 1px rgba(0, 5, 112, 0.55);
      border-radius: 20px;
      backdrop-filter: blur(0px);
      margin-bottom: 13px;
      .operate-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 39px;
        height: 39px;
        margin-left: -19.5px;
        margin-top: -19.5px;
      }

      .what-san-vedio-box {
        width: 100%;
        height: 100%;
      }
    }

    .what-san-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .what-san-wrap-left {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
      }

      .what-san-wrap-right {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .right-look {
          margin-right: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 11px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 16px;

          img {
            width: 12px;
            height: 10px;
            padding-right: 4px;
          }
        }
      }
    }
  }

  .introduce {
    margin-top: 23px;

    .san-box-title-right-2 {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 20px;
      display: flex;
      align-items: center;

      img {
        width: 6px;
        height: 6px;
        margin-left: 6px;
      }
    }

    .introduce-wrap {
      margin-top: 15px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .introduce-wrap-item {
        // width: 384px;
      }
    }
  }

  .link {
    font-size: 10px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 14px;
    margin: 15px auto 0 auto;
    text-align: center;
  }

  .bei {
    font-size: 10px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 14px;
    margin: 9px 0 50px 0;
    text-align: center;
    padding-bottom: 30px;
  }

  .information-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .information-list-item-bg {
      background: #e9efff;
      border-radius: 18px;
    }

    .information-list-item {
      margin: 15px 0 17px 0;
      width: 90px;
      height: 27px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 27px;
      text-align: center;
    }
  }

  .text {
    color: red;
    font-size: 30px;
  }
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
